<script setup>
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import CreateBanner from './components/CreateBanner.vue'
import { getBannerList, deleteBanner } from "@/apis/banner"
import { onMounted, reactive, ref, watch, nextTick, provide } from 'vue';
import { message } from 'ant-design-vue';
import Pagination from "@/components/Pagination/Pagination.vue";
const RoleTypeOptionsEnum = reactive([
    {
        label: "H5端",
        value: "phone",

    },
    {
        label: "pc端",
        value: "web",
    },
    {
        label: "小程序",
        value: "wx",

    },
])
const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        align: 'center',
    },
    {
        title: '平台类型',
        dataIndex: 'type',
        align: 'center',
    },
    {
        title: '图片',
        dataIndex: 'img',
        align: 'center',
    },
    {
        title: '链接',
        dataIndex: 'url',
        align: 'center',
    },
    {
        title: '上传人',
        dataIndex: 'userId',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        width: 120,
        fixed: 'right',
    },
];
const loading = ref(true);
const tableRef = ref(null);
const bannerRef = ref(null);
const tableHeight = ref(0);
const dataSource = ref([{}]);
const formState = reactive({
    page: 1,
    size: 10,
    type: "",
})
const total = ref(0);
onMounted(() => {
    // nextTick(() => {
    //     if (dataSource.value) {
    //         let box = tableRef.value;
    //         let top = box.children[0].getBoundingClientRect().top;
    //         tableHeight.value = window.innerHeight - top - 54 - 64 - 30;
    //     }
    // })
})
onMounted(() => {
    getList();
    loading.value = false
})
provide("getList", () => getList())
provide("RoleTypeOptionsEnum", RoleTypeOptionsEnum)

const getList = async () => {
    loading.value = true
    let res = await getBannerList({ ...formState });
    if (res.code === 200) {
        dataSource.value = res.data.list;
        total.value = res.data.total;
        loading.value = false
    }
}

const handleCreateRole = () => {
    bannerRef.value.open = true
}
const changepage = (options) => {
    loading.value = true;
    formState.page = options.page;
    formState.size = options.pageSize;
}
const roleEdit = (options) => {
    for (const key in bannerRef.value.formState) {
        options[key] && (bannerRef.value.formState[key] = options[key])
    };
    bannerRef.value.open = true;
}
const handleDelete = async (options) => {
    loading.value = true;
    let res = await deleteBanner({ id: options.id });
    if (res.code === 200) {
        getList();
    }
}
const handleSeach=() => {
    getList();
};
</script>
<template>
    <div class="role-container outerlayer-container">
        <div class="search top-search-container">
            <div>
                <span>平台类型:</span>&nbsp;
                <a-select v-model:value="formState.type" :allowClear="true" style="width: 150px;" placeholder="请选择">
                    <a-select-option v-for="item in RoleTypeOptionsEnum" :value="item.value">{{ item.label
                    }}</a-select-option>
                </a-select>
            </div>&nbsp;
            <div>
                <a-button type="primary" @click="handleSeach">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    搜索
                </a-button>&nbsp;
            </div>
            <div>
                <a-button type="primary" @click="handleCreateRole">
                    <template #icon>
                        <PlusCircleOutlined />
                    </template>
                    新增轮播
                </a-button>
            </div>
        </div>
        <div class="main-content-container">
            <div ref="tableRef">
                <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"
                    :scroll="{ x: 'max-content' }">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex === 'type'">
                            <template v-for="(item, index) in RoleTypeOptionsEnum" :key="index">
                                <a-tag v-if="item.value === text" :bordered="false" color="processing">{{ item.label
                                }}</a-tag>
                            </template>
                        </template>
                        <template v-if="column.dataIndex === 'url'">
                           {{ text||'暂无' }}
                        </template>
                        <template v-if="column.dataIndex === 'img'">
                            <img :src="text" alt="" width="30">
                        </template>
                        <template v-if="column.dataIndex === 'operate'">
                            <div class="">
                                <!-- <a-button type="link" size="small" @click="roleEdit(record)">编辑</a-button> -->
                                <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
                            </div>
                        </template>
                    </template>
                </a-table>
            </div>
            <Pagination :total="total" :page="formState.page" :size="formState.size" @changepage="changepage" />
        </div>
        <create-banner ref="bannerRef" />

    </div>
</template>


<style lang='scss' scoped>
.role-container {
    .search {
        display: flex;
        margin-bottom: 10px;
    }
}
</style>